<%@ page language="java" contentType="text/html" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %>
<%@include file="header.jsp" %>
<!doctype html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>确认订单</title>
<script type="text/javascript" src="m/js/template.js"></script>
<script type="text/javascript" src="m/js/jquery.min.js"></script>
<script type="text/javascript" src="m/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="m/js/cart.js"></script>
<script type="text/javascript" src="m/js/jquery.msg.src.js"></script>
<script type="text/javascript" src="m/js/loginValid.js"></script>
<c:if test="${not empty wcpay}">
<script type="text/javascript" src="m/js/wcpay/wx.wcpay.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script>
</c:if>
<script type="text/javascript">
var wcpay = "${wcpay}";
</script>

<style type="text/css">
*{ margin:0; padding:0;}
ul li { list-style:none;}
body{height:auto;margin-bottom:10%; background:url(m/images/c_shop_bg2.png) no-repeat right;}
/*body{height:auto;margin-bottom:10%; background:url(m/images/bg.png);}*/

h2{ font:normal 18px "黑体"; color:#fff;line-height:2em; }
h3{color:#999; font-size:14px; font-weight:normal; padding:0 0 15px;}


.main{ width:94%; margin:0 auto; margin-top:14%; }
.main .list .border{background:url("m/images/menu_list.png") repeat-x;background-position:bottom;}
.main .contact_info{height:70px; border-radius:0.2em;background-size:cover;width:100%;box-shadow: 0px 0px 0px #2b2e31; }
.main .contact_info ul li{font:normal 14px "黑体"; color:#fff; line-height:30px; padding:5px 0 0 20px; width:93%;}
.main .contact_info .info_line{font:normal 16px "黑体"; color:#fff; line-height:35px; padding:5px 0 0 20px; width:93%;}
.main .contact_info .img1{float:left;width:10%;margin:10px;}
.main .contact_info img{width:80%;margin-top:25%;}
.main .contact_info .input{width:20%;box-shadow:none;-webkit-box-shadow:none;border: 0px solid #2b2e31;-webkit-appearance: none; background-color:transparent;font:normal 16px "黑体"; color:#fff;}
.main .contact_info .input_tel{width:40%;box-shadow:none;-webkit-box-shadow:none;border: 0px solid #2b2e31;-webkit-appearance: none; background-color:transparent;font:normal 16px "黑体"; color:#fff;}
.main .contact_info .input_address{width:80%;box-shadow:none;-webkit-box-shadow:none;border: 0px solid #2b2e31;-webkit-appearance: none; background-color:transparent;font:normal 16px "黑体"; color:#fff;}

.main .shop_info{ background:url(m/images/shop_info.png) no-repeat;background-size:cover;width:100%;}
.main .shop_info ul li{font:normal 18px "黑体"; color:#fff; line-height:42px; padding:0px 0 0 20px; width:95%;}
.main .shop_info ul li a{ text-decoration:none;font:normal 18px "黑体"; color:#fff; line-height:42px;}
.main .shop_info span{text-align:right;float:right; padding-right:20px;}

.main .food_info {background:url(m/images/order_foodlist_bg.png);margin-top:7px;}

.main .order_info{ background:transparent;background-size:cover;width:100%;}
.main .order_info ul li{font:normal 18px "黑体"; color:#fff; line-height:30px; padding:0px 0 0 20px; width:95%;text-align:right;}
.main .order_info ul li a{ text-decoration:none;font:normal 18px "黑体"; color:#fff; line-height:42px;}
.main .order_info input{width:22%;box-shadow:none;-webkit-box-shadow:none;border: 1px solid #2b2e31;-webkit-appearance: none; background-color:#2b2e31;font:normal 18px "黑体"; color:#fff;}
.main .other_info{background:url(m/images/other_info.png) no-repeat;background-size:cover;width:100%;}
.main .other_info textarea{ height:5.4em; width:95%;box-shadow:none;-webkit-box-shadow:none;border: 1px solid #2b2e31;-webkit-appearance: none; background-color:#2b2e31;
padding:0.4em 0 0 0.4em;font:normal 18px "黑体"; color:#fff;}

.main .content_zf { background:url(m/images/shop_info.png) no-repeat;background-size:cover;width:100%;color:#fff; }
.main .content_zf .on_line {font:normal 18px "黑体"; line-height:42px; padding:0px 0 0 20px; width:93%; height:42px;}
.main .content_zf .on_arrival {font:normal 18px "黑体"; line-height:42px; padding:0px 0 0 20px; width:93%; height:42px;}
.main .check{background-image:url("m/images/check.png"); background-repeat:no-repeat;text-align:left;font-weight:bold;background-position:center;color:#ce0606; }

.main .sure_zf {width:35%; margin-top:10px;float:right;margin-right:5%; margin-bottom:5%;}
.main .sure_zf img{width:100%;}
.main .cancel_zf {width:35%; margin-top:10px;float:left;margin-left:5%; margin-bottom:5%;}
.main .cancel_zf img{width:100%;}
@media screen and （- webkit -device-pixel-ratio:1.5） {
/* CSS for high-density screens */
#footer_nav {position:fixed;}
}
select{ width:140px; height:30px;background-color:#2b2e31;border:1px solid #2b2e31; margin:5px 0 0 0;color:#fff;  font-size:18px; }

.content{ width:99%; margin:0 auto; overflow:hidden; box-shadow: 0px 0px 0px #26282b;background-color:transparent;border:0px solid #272a2d;border-radius:0.3em; color:#686868;}
.content .order{margin:0 auto; padding:0px 10px 5px 0px;font-family:"黑体"; line-height:80px; position:relative;overflow:hidden;background:url("m/images/cart_line.png") repeat-x;background-position:bottom;}
.content .order .Designation{line-height:30px; color:#fff; margin-top:5px; overflow:left; font-size:17px}
.content .order .unit_price{color:#fff;float:right;margin-top:1%;width:10%;margin-right:-15%;}
.content .order .unit_price .unit_price_txt{ float:right;}
.content .order .order_img{ float:left; width:20%; overflow:hidden;}
.content .order .order_img img{width:100%;}
.content .order .order_txt{ float:left; width:99%; overflow:hidden;}

.order .quantity span{ vertical-align:bottom; overflow:hidden;height:32px;}
.order .quantity .quantity { background-image:url("m/images/quan.png"); text-align:center; background-repeat:no-repeat; width:42px; height:32px;margin:3px 0 0  0px ; background-size:cover;border:1px solid #2b2e31;background-color:#2b2e31; overflow:hidden; line-height:32px;vertical-align:bottom;color:#fff; font-size:1em; }

</style>

</head>
<!-- 
.content .order .unit_price{line-height:32px;color:#fff; overflow:right;}
.content .order .unit_price .unit_price_txt{ float:left;overflow:hidden;margin-right:28px; margin-top:0px;}
 -->
<body>
		
	<div class="main">    
    	<div class="list">
            <div class="contact_info" style="background:url(m/images/order_info_bg.png) repeat-x;">
                <div class="img1">
                	<img src="m/images/order_info_img1.png"/>
                </div>
                <div class="info_line">
                    	客户名：
                    	<input id="name" class="input" value="${user.realName }">
                    	<input id="tel" class="input_tel" value="${user.phone }">
                </div>
                <div class="address_line">
                	<input id="tel" class="input_address" value="${raddress}" readOnly="true">
                </div>
            </div>
           <div class="food_info">
           	<div style="height:40px;background:url(m/images/cart_line.png) repeat-x;opacity:1;background-position:bottom;">
          		<h2>&nbsp;&nbsp;${shopInfo}</h2>
          	</div>
            <div class="order_info">
		           	<div class="content" >
						<div id="content">
						</div>
					</div>  
              <ul>
                  <li>数量：<span>${pcount }&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
                  <li>总价：<span id="totalPrice" style="color:red;">￥${totalPrice }</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>          
              </ul>
             
            </div> 
           <h2 style="display:none">备注信息</h2>               
            <div class="other_info" style="display:none">
              <textarea placeholder="如有特殊要求请填写" rows="3" id="memo"></textarea>
            </div> 
             <div class="content_zf" style="margin-bottom:20px;display:none;">
        		<div class="on_line check">微信支付</div>
        		<div class="on_arrival" style="display:none">到店支付</div>
   			 </div>
   			</div><!-- 背景 end --> 
   			 
            <input type="hidden" id="pay_type" value="1"/>
            <div  class="cancel_zf"><a href="javascript:cancelOrder();" id="cancel_order"><img src="m/images/zf_cancel.png"></a></div>
          	<div  class="sure_zf"><a href="javascript:submitOrder();" id="submit_order"><img src="m/images/zf_sure.png"></a></div>  	
   		</div>
    </div>
    <script type="text/javascript">
  //提交订单
    function submitOrder(){
    	var data ={};
    	//验证用户是否登录
    	var userId = '<%=request.getSession().getAttribute("userId")%>';
    	loginValid(userId);
    	data.userId = userId;
    	
    	var length = $.cart.length();
    	if(length <= 0)
    	{
    		$.messager.show("您没有购买物品!",1000,function(){
    			location.href = "${host}/category?cid=${loginId}";
    		});
    		return;
    	}
    	data.totalPrice = $.cart.totalPrice();
    	data.products = $.cart.getAll();
    	data.people = $("#people").val();
    	data.name = $("#name").val();
    	data.useCredits = $("#useCredits").val();
    	data.arriveTime = $("#arriveTime").val();
    	data.memo = $("#memo").val();
    	data.tel = $("#tel").val();
    	data.address = '${shopInfo }';
    	data.payType = parseInt($("#pay_type").val());
    	$("#submit_order").attr("href","javascript:");
    	
    	$.ajax({
    		url:"${host}/submitOrder",
    		type:"POST",
    		data:{data:JSON.stringify(data),customerId:${customerId}},
    		dataType:"json",
    		success:function(data){
    			if(data.type == "online"){
    				//location.href = data.url;
    				//if(wcpay == "yes"){
    					
    					top.wc_pay.config.cid = "${loginId}";
    					top.wc_pay.config.appId = "${wxpay.seller}";
    					top.wc_pay.config.partnerID = "${wxpay.partner}";
    					top.wc_pay.config.partnerKey = "${wxpay.key}";
    					top.wc_pay.config.appKey = "${wxpay.rsa}";
    					top.wc_pay.config.notifyUrl = "${wcpayNotifyUrl}";

    					top.wc_pay.config.name = data.name;
    					top.wc_pay.config.orderNo = data.orderNo.toString();
    					top.wc_pay.config.totalFee = parseFloat(data.totalPrice).toFixed(2)*100+"";

    					top.wc_pay.pay();
    					
    				//}else if(alipay == "yes"){//跳转至支付宝付款WAP页面
    				//	location.href = data.url;
    				//}else{
    				//	alert("支付正在建设中，敬请期待！")
    				//}
    			}
    			if(data.type == "offline"){
    				$.messager.show(data.msg,1500,function(){
    					window.location.href = "category?cid=${loginId}";
    				});
    			}
    			if(data.type == "error"){
    				alert(data.msg);
    			} else {
    				window.localStorage.cart = "[]";
    			}
    			$("#submit_order").attr("href","javascript:submitOrder();");
    		}
    	});
    }
  
    function checkCredits(){
    	var ownCredits = <%=request.getAttribute("credits") %>;
    	var used = $("#useCredits").val();
    	if($.trim(used)=='') {
    		return;
    	}
    	reg = new RegExp("^[0-9]+$");
    	var isNotNum = !reg.test(used);
    	if(isNotNum) {
    		alert('请输入正确的积分');
    		$("#useCredits").val("");
    		$("#useCredits").focus();
    		return;
    	}
    	if(used>ownCredits) {
    		alert('您的积分不够..');
    		$("#useCredits").val("");
    		$("#useCredits").focus();
    		return;
    	}
    	var old = parseFloat(${totalPrice });
    	var realPrice = (old-parseFloat($("#useCredits").val())*0.1).toFixed(2);
    	if(realPrice<=0) {
    		alert('请输入正确的积分');
    		$("#useCredits").val("");
    		$("#useCredits").focus();
    		return;
    	}
    	$("#totalPrice").html(realPrice);
    }
    /*选测付款方式*/
    
    $(".on_line").click(function(){
		$(this).addClass("check");
		$(".on_arrival").removeClass("check");
		$("#pay_type").val(1);
	});
	$(".on_arrival").click(function(){
		$(this).addClass("check");
		$(".on_line").removeClass("check");
		$("#pay_type").val(2);
	});
    </script>
    
    
<script type="text/javascript">
jQuery(function(){
	var data = jQuery.cart.getAll();
	//jQuery("#temp").tmpl(data).appendTo("#content");
	var d = {data:data};
	$("#content").append(baidu.template("temp",d));
	
	$(".on_line").click(function(){
		$(this).addClass("check");
		$(".on_arrival").removeClass("check");
		$("#pay_type").val(1);
	});
	$(".on_arrival").click(function(){
		$(this).addClass("check");
		$(".on_line").removeClass("check");
		$("#pay_type").val(2);
	});
});

</script>

<script type="text/html" id="temp">
	<#for(var i =0;i< data.length;i++){#>
    <div class="order" id="order_<#=data[i].id#><#=data[i].sizeIdTem#>">
		<div style="float:left; width:40%;height:70px; margin-left:10px;margin-top:10px;">
			<img src="<#=data[i].images#>" width=80% height=100%/>
		</div>	
  		  <div class="Designation" >
				<div style="float:left;"><#=data[i].name#></div>
				<div class="unit_price_txt" style="float:right;width:20%;margin-right:0%;font-size:15px">￥<#=data[i].price#></div>
		  </div>
		
    	<div class="unit_price">
			<div class="quantity" >
				x <#=data[i].number#>
			</div>
		</div>
    </div>
    </div>
	<#}#>

</script>
<script type="text/javascript">
	function cancelOrder(){
		if(confirm("确认取消订单吗？")){
			window.localStorage.cart = "[]";
			location.href = "${host}/category?cid=${loginId}";
		}
	}
</script>
</body>
<%@ include file="footer.jsp" %>

</html>